<template>
  <div class="fan-tan">
    <div class="box"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
$box-size: 200px;
.fan-tan {
  box-sizing: border-box;
  position: relative;
  padding: 0;
  height: 100%;
  width: 100%;
  .box {
    width: $box-size;
    height: $box-size;
    border-radius: $box-size;
    position: absolute;
    top: 0;
    left: 0;
    // background-color: #fff;
    background-color: rgba(232, 246, 250, 1);
    // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1),
    //   4px 4px 10px 0 rgba(0, 0, 0, 0.05),
    //   inset 0 0 10px 0 rgba(255, 255, 255, 0.1);
    animation: fantan-top-100 7.5s linear both infinite alternate,
      fantan-left-100 3.5s linear both infinite alternate;
  }
  .box2 {
    top: 0;
    left: calc(100% - $box-size);
    animation: fantan-top-100 6.5s linear both infinite alternate,
      fantan-left-0 7.5s linear both infinite alternate;
  }
  .box3 {
    top: calc(100% - $box-size);
    left: 0;
    animation: fantan-top-0 2.5s linear both infinite alternate,
      fantan-left-100 7.5s linear both infinite alternate;
  }
}
@keyframes fantan-top-100 {
  to {
    top: calc(100% - $box-size);
  }
}
@keyframes fantan-top-0 {
  to {
    top: 0;
  }
}
@keyframes fantan-left-100 {
  to {
    left: calc(100% - $box-size);
  }
}
@keyframes fantan-left-0 {
  to {
    left: 0;
  }
}
</style>
